<template>
  <div class="mvlistruko">
    <span style="font-size:20px;cursor: pointer;font-weight:bold;" @click="getJumpsonglist">推荐MV<i class="el-icon-arrow-right" style="font-size:18px;"></i></span>
    <div class="main">
      <div class="mainlist" v-for="item in recommendnewmusiclist" :key="item.id">
        <img :src="item.picUrl" alt="#">
        <p style="margin-top:5px;opacity: 0.8;font-size: 14px;width: 260px;">{{item.name}}</p>
        <p style="font-size:12px;opacity: 0.5;">{{item.artistName}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Bus from '@/components/eventBus'
export default {
  name: 'mvlistruko',
  computed: {
    ...mapState({
      recommendnewmusiclist: state => state.Home.recommendnewmusiclist
    })
  },
  methods: {
    getJumpsonglist() {
      this.$router.push({ path: '/videoclip' })
      Bus.$emit('getJumptomv', 2)
    }
  },
  mounted() {
    this.$store.dispatch('getRecommendedmvList')
  }
}
</script>

<style lang="less" scoped>
.mvlistruko {
  margin-top: 20px;
  .main {
    display: flex;
    display: grid;
    grid-template-columns: auto auto auto auto;
    width: 1110px;
    .mainlist {
      img {
        width: 260px;
        height: 150px;
        border-radius: 5px;
      }
    }
  }
}
</style>